<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>vue学习</title>
    <script src="./js/vue.js"></script>
  </head>
  <body>
    <div id="app">
      <h3>任务列表</h3>
      <input type="text" v-model="todo" />
      <hr />
      <ul>
        <li v-for="item in todos" :key="item.id">{{item.value}}</li>
      </ul>
    </div>
    <script>
      const app = Vue.createApp({
        data() {
          return {
            todo: '',
            todos: []
          }
        },
        mounted() {
          // 获取本地存储中的数据
          const todos = window.localStorage.getItem('todos')
            ? JSON.parse(window.localStorage.getItem('todos'))
            : []
          // 修改数据，修改数据是同步的，但进行数据比对到页面显示它是异步的，它页面比对渲染是较慢的，如果它是同步代码块，可以堵塞进程执行
          this.todos = todos

          // 手动通过添加异步宏任务方式来让获取dom操作，它不可靠
          // setTimeout(() => {
          //   console.log(document.querySelectorAll('li').length, 'mounted')
          // }, 100)

          // this.$nextTick 等待下一次 DOM 更新刷新的工具方法
          // nextTick它会按我们现在浏览器支持异步方案来自动的选择，把操作放到渲染处理的最后面
          // nextTick中可以得到最真实的渲染后的dom
          // 语法 this.$nextTick(()=>{})
          this.$nextTick(()=>{
            console.log(document.querySelectorAll('li').length, 'mounted -- nextTick')
          })


        },
        beforeUnmount() {}
      })
      app.mount('#app')
    </script>
  </body>
</html>
